<!-- 饼图 -->
<template>
  <el-card>
    <div :id="id" :style="{ height, width }" :class="className" />
  </el-card>
</template>

<script setup lang="ts">
import { categoricalDataType } from "@/api/stats/type";
import * as echarts from "echarts";

onMounted(() => {
  const chart = echarts.init(
    document.getElementById(props.id) as HTMLDivElement
  );
  chart.setOption(options);
  window.addEventListener("resize", () => {
    chart.resize();
  });
});

const props = defineProps({
  id: {
    type: String,
    default: "pieChart",
  },
  className: {
    type: String,
    default: "",
  },
  width: {
    type: String,
    default: "540px",
  },
  height: {
    type: String,
    default: "450px",
  },
  title: {
    type: String,
    default: "",
    required: true,
  },
  name: {
    type: String,
    default: "",
    required: true,
  },
  data: {
    type: Array<categoricalDataType>,
    default: [],
    required: true,
  },
});

interface dataType {
  value: number;
  name: string;
}

const handleData = computed(() => {
  let needData: dataType[] = [];
  props.data.forEach((item) => {
    needData.push({ value: item.count, name: item.typeName });
  });
  return needData;
});

const options = reactive({
  title: {
    text: props.title,
    left: "center",
    textStyle: {
      color: "#222",
    },
  },
  tooltip: {
    trigger: "item",
  },
  legend: {
    top: "bottom",
    textStyle: {
      color: "#999",
    },
  },
  series: [
    {
      name: props.name,
      type: "pie",
      radius: "70%",
      data: handleData.value,
      roseType: "angle",
      itemStyle: {
        normal: {
          color: function (colors: any) {
            var colorList = [
              "#fc8251",
              "#5470c6",
              "#91cd77",
              "#ef6567",
              "#f9c956",
              "#75bedc",
              "#FF1493",
              "#0000FF",
              "#FFFF00",
              "#9932CC",
							"#DA70D6"
            ];
            return colorList[colors.dataIndex];
          },
        },
      },
    },
  ],
});
</script>
